<template>
  <div>
    <el-form
      class="detail-form-content"
      ref="ruleForm"
      :model="ruleForm"
      label-width="80px"
	  style="background: transparent;"
    >  
     <el-row>
      <el-col :span="12">
        <el-form-item   v-if="flag=='renyuan'"  label="账号" prop="zhanghao">
          <el-input v-model="ruleForm.zhanghao" readonly              placeholder="账号" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item   v-if="flag=='renyuan'"  label="姓名" prop="xingming">
          <el-input v-model="ruleForm.xingming"               placeholder="姓名" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item v-if="flag=='renyuan'"  label="性别" prop="xingbie">
          <el-select v-model="ruleForm.xingbie"  placeholder="请选择性别">
            <el-option
                v-for="(item,index) in renyuanxingbieOptions"
                v-bind:key="index"
                :label="item"
                :value="item">
            </el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="24">  
        <el-form-item v-if="flag=='renyuan'" label="头像" prop="touxiang">
          <file-upload
          tip="点击上传头像"
          action="file/upload"
          :limit="3"
          :multiple="true"
          :fileUrls="ruleForm.touxiang?ruleForm.touxiang:''"
          @change="renyuantouxiangUploadChange"
          ></file-upload>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item   v-if="flag=='renyuan'"  label="邮箱" prop="youxiang">
          <el-input v-model="ruleForm.youxiang"               placeholder="邮箱" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item   v-if="flag=='renyuan'"  label="手机" prop="shouji">
          <el-input v-model="ruleForm.shouji"               placeholder="手机" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item   v-if="flag=='renyuan'"  label="人员类型" prop="renyuanleixing">
          <el-input v-model="ruleForm.renyuanleixing"               placeholder="人员类型" clearable></el-input>
        </el-form-item>
      </el-col>
      <el-form-item v-if="flag=='users'" label="用户名" prop="username">
        <el-input v-model="ruleForm.username" 
        placeholder="用户名"></el-input>
      </el-form-item>
      <el-col :span="24">
      <el-form-item>
        <!-- <el-button type="primary" @click="onUpdateHandler">修 改</el-button> -->
      </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-divider>修改密码</el-divider>
        <el-form :model="passwordForm" ref="passwordFormRef" label-width="80px" style="max-width:400px;">
          <el-form-item label="原密码" prop="oldPassword">
            <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入原密码" />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" />
          </el-form-item>
          <el-form-item label="确认密码" prop="confirmPassword">
            <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onPasswordUpdate">修改密码</el-button>
          </el-form-item>
        </el-form>
      </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script>
// 数字，邮件，手机，url，身份证校验
import { isNumber,isIntNumer,isEmail,isMobile,isPhone,isURL,checkIdCard } from "@/utils/validate";
import { updateRenyuan } from '@/utils/renyuanLocal';
import { updateUser, getCurrentUser, setCurrentUser } from '@/utils/userLocal';

export default {
  data() {
    return {
      ruleForm: {},
      flag: '',
      usersFlag: false,
      renyuanxingbieOptions: [],
      passwordForm: { oldPassword: '', newPassword: '', confirmPassword: '' },
    };
  },
  mounted() {
    // 获取当前登录用户信息
    var table = this.$storage.get("sessionTable");
    this.flag = table;
    this.$http({
      url: `${this.$storage.get("sessionTable")}/session`,
      method: "get"
    }).then(({ data }) => {
      if (data && data.code === 0) {
        this.ruleForm = data.data;
      } else {
        this.$message.error(data.msg);
      }
    });
    this.renyuanxingbieOptions = "男,女".split(',')
  },
  methods: {
    // 头像上传回调
    renyuantouxiangUploadChange(fileUrls) {
      this.ruleForm.touxiang = fileUrls;
    },
    // 修改个人信息
    onUpdateHandler() {
      if((!this.ruleForm.zhanghao)&& 'renyuan'==this.flag){
        this.$message.error('账号不能为空');
        return
      }
      if((!this.ruleForm.mima)&& 'renyuan'==this.flag){
        this.$message.error('密码不能为空');
        return
      }
      if(this.ruleForm.touxiang!=null) {
        this.ruleForm.touxiang = this.ruleForm.touxiang.replace(new RegExp(this.$base.url,"g"),"");
      }
      if( 'renyuan' ==this.flag && this.ruleForm.youxiang&&(!isEmail(this.ruleForm.youxiang))){
        this.$message.error(`邮箱应输入邮箱格式`);
        return
      }
      if( 'renyuan' ==this.flag && this.ruleForm.shouji&&(!isMobile(this.ruleForm.shouji))){
        this.$message.error(`手机应输入手机格式`);
        return
      }
      if('users'==this.flag && this.ruleForm.username.trim().length<1) {
        this.$message.error(`用户名不能为空`);
        return  
      }
      if(this.flag === 'renyuan') {
        updateRenyuan(this.ruleForm);
        this.$message({
          message: "修改信息成功",
          type: "success",
          duration: 1500
        });
      } else {
        this.$http({
          url: `${this.$storage.get("sessionTable")}/update`,
          method: "post",
          data: this.ruleForm
        }).then(({ data }) => {
          if (data && data.code === 0) {
            this.$message({
              message: "修改信息成功",
              type: "success",
              duration: 1500,
              onClose: () => {
              }
            });
          } else {
            this.$message.error(data.msg);
          }
        });
      }
    },
    // 修改密码
    onPasswordUpdate() {
      // 校验
      if (!this.passwordForm.oldPassword || !this.passwordForm.newPassword || !this.passwordForm.confirmPassword) {
        this.$message.error('请填写完整密码信息');
        return;
      }
      if (this.passwordForm.newPassword !== this.passwordForm.confirmPassword) {
        this.$message.error('两次新密码输入不一致');
        return;
      }
      // 获取当前用户
      let user = getCurrentUser();
      let oldPwd = user.mima || user.password;
      if (this.passwordForm.oldPassword !== oldPwd) {
        this.$message.error('原密码错误');
        return;
      }
      user.password = this.passwordForm.newPassword;
      user.mima = this.passwordForm.newPassword;
      setCurrentUser(user);
      if (this.flag === 'renyuan') {
        updateRenyuan(user);
      } else {
        updateUser(user);
      }
      this.$message.success('密码修改成功，下次登录生效');
      this.passwordForm = { oldPassword: '', newPassword: '', confirmPassword: '' };
    }
  }
};
</script>
<style lang="scss" scoped>
</style>
